<template>
  <div class="Video">
    <div class="title2">
        <div>频道</div>
    </div>

    <div class="container">
      
        <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/创意.jpeg)">
        <div class="tl">#创意#</div>
        </div>
       
  
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/剧情.jpeg)">
       <div class="tl">#剧情#</div>
        </div>
        
       
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/动画.jpeg)">
       <div class="tl">#动画#</div>
        
       </div>
     

       
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/励志.jpeg)">
       <div class="tl">#励志#</div>
        
       </div>
    

       
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/实验.jpeg)">
       <div class="tl">#实验#</div>
       
       </div>
     

       
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/广告.jpeg)">
        <div class="tl">#广告#</div>
       
       </div>
      

      
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/搞笑.jpeg)">
        <div class="tl">#搞笑#</div>
       
       </div>
     

       
       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/旅行.jpeg)">
        <div class="tl">#旅行#</div>
       </div>


       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/时尚.jpeg)">
        <div class="tl">#时尚#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/汽车.jpeg)">
        <div class="tl">#汽车#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/混剪.jpeg)">
        <div class="tl">#混剪#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/爱情.jpeg)">
        <div class="tl">#爱情#</div>
       </div>



       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/生活.jpeg)">
        <div class="tl">#生活#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/科幻.jpeg)">
        <div class="tl">#科幻#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/纪录.jpeg)">
        <div class="tl">#纪录#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/美食.jpeg)">
        <div class="tl">#美食#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/运动.jpeg)">
        <div class="tl">#运动#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/音乐.jpeg)">
        <div class="tl">#音乐#</div>
       </div>

       <div class="short-video-item" style="background-image:url(https://codelover.club/coursefiles/images/film/预告.jpeg)">
        <div class="tl">#预告#</div>
       </div>
    </div>
  </div>
</template>

<style>
.container{
  margin-bottom: 39px;
}

.title{
    background-color: red;
    text-align: center;
    color: white;
    font-size: 25px;
    font-weight: bolder;

}
.title2{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bolder;
    font-size: 16px;
    height: 3rem;
    background-color: white;
    border-bottom: 1px solid gray;
}
.p1,.p2{
    display: inline;
    color: red;
}
.short-video-item {
    position: relative;
    display: inline-block;
    width: 49.5%;
    height: 15rem;
    background-position: 50%;
    background-size: cover;
}
.tl{
  position: absolute;
  bottom: 3rem;
  color: white;
  width: 100%;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  text-align: center;

}
.dif{
  display: flex;
  align-items: center;
  bottom: 0.2rem;
  font-size: 0.16rem;
  position: absolute;
  width: 3.4rem;
  margin: 0.5rem;
  color: white;
}
.user{
  flex: 1;
  display: inline-block;
  margin: 0.25rem;
  white-space: nowrap;
}



</style>